<template>
  <div class="table">
    <div style="float: left;margin-left: 40px; width: 100px">
      <el-button type="warning" size="mini" @click="dialogFormVisible = true">购买会员</el-button>
    </div>
    <div class="search-box" style="width: 200px;float: right;margin-bottom: 10px">
      <el-input
          class="search"
          size="mini"
          v-model="search"
          placeholder="输入关键字搜索"/>
    </div>
    <el-dialog title=""  :visible.sync="dialogFormVisible" center>
      <div style="margin-left: 140px">
      <el-form ref="form" :model="form" label-width="80px" style="width: 380px;height: 400px">
        <h2 style="color: #ffd04b;padding-left: 160px">VIP信息录入</h2><br>
        <el-form-item label="会员编号:">
          <el-input v-model="form.id" ></el-input>
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="电话:">
          <el-input v-model="form.phone" ></el-input>
        </el-form-item>
        <el-form-item label="vipID:">
          <el-input v-model="form.vipID" ></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input v-model="form.password" type="text" ></el-input>
        </el-form-item>
        <el-form-item label="会员期限:">
          <el-input v-model="form.dateLine" type="text"></el-input>
        </el-form-item>
      </el-form>
      </div>
      <div slot="footer" class="dialog-footer" >
        <el-button type="" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="warning" @click="onsubmit()">确 定</el-button>
      </div>
    </el-dialog>
  <el-table
      :data="tables"
      height="650px"
      style="width: 100%"
      :header-cell-style="{background:'#ffd04b',color:'#606266'}"
      :row-class-name="vip"
      v-loading="loading">
    <el-table-column
        align="center"
        prop="id"
        label="会员编号"
        width="180">
    </el-table-column>
    <el-table-column
        align="center"
        prop="name"
        label="会员姓名"
        width="180">
    </el-table-column>
    <el-table-column
        align="center"
        prop="vipID"
        label="会员账号">
    </el-table-column>
    <el-table-column
        align="center"
        prop="password"
        label="会员密码">
    </el-table-column>
    <el-table-column
        align="center"
        prop="phone"
        label="会员电话">
    </el-table-column>

    <el-table-column
        align="center"
        prop="dateLine"
        label="会员期限">
    </el-table-column>
    <el-table-column
      align="center"
      label="操作"
      width="80px">
    <template slot-scope="scope">
      <el-button
          size="mini"
          type="danger"
          @click="vipDelete(scope.row)">删除</el-button>
    </template>
  </el-table-column>
  </el-table>
    </div>
</template>

<script>
import axios from "axios";

export default {
  name: "vipMsg",
  methods: {
    vip({row, rowIndex}) {
      if (rowIndex%2 === 1) {
        return 'success-row'
      }
      return '';
    },
    vipDelete(row){
      let _this = this
      this.$confirm('是否确定要删除'+row.name+'?','删除数据',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(() => {
        axios.delete('http://120.24.48.65:8282/vip/delete/'+row.id).then(response=>{
          console.log(response.data)
          if (response.data){
              this.$alert(row.name+'删除成功！','删除数据',{
              callback:action => {
                location.reload()
              }
            });
          }
        })
      }).catch(() =>{

      })
    },

    //提交数据到后台，购买会员
    onsubmit(){
      console.log(this.form)
      axios.put('http://120.24.48.65:8282/vip/insert',this.form).then(response =>{
        console.log(response.data)
        if (response.data){
          this.$alert('添加会员成功','添加数据',{
            callback:action => {
              location.reload()
            }
          });
        }
      })

      this.dialogFormVisible = false
    }
  },

  created() {
    axios.get('http://120.24.48.65:8282/vip/list').then(response =>{
       this.tableData=response.data
      if(response.data){
        setTimeout(() => {
          //代码
          this.loading = false
        }, 500);
      }
    })
  },
  data() {
    return {
      search:'',
      tableData:[],
      dialogFormVisible:false,
      form:{
        name:'',
        phone:'',
        password:'',
        dateLine: '',
        vipID: ''
      },
      loading:true
    }
  },
  //搜索功能
  computed:{
    tables:function (){
      let search = this.search
      if(search){
        return this.tableData.filter(function (dataNews){
          return Object.keys(dataNews).some(function (key) {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.tableData
    }
  },
}

</script>
<style >
.el-table .success-row {
  background: #f0f9eb;
}
</style>


